<template>
  <div>
    <el-row class="p-b">
      <el-upload v-if="isShowBtn"
        ref="uploadRef"
        action="#"
        :limit="1"
        :on-change="handleChange"
        :auto-upload="false"
        :show-file-list="false"
        :on-exceed="handleExceed">
        <template #trigger>
          文件：<el-button type="primary"
            plain
            size="small">选择文件</el-button>
        </template>
        <div slot="tip"
          class="el-upload__tip">
          <div style="margin-top: 5px;">
            <el-link v-if="fileUploadVO.fileName">已上传：</el-link><el-link type="primary"
              @click="downFun(fileUploadVO.fileName,fileUploadVO.fileAddress)">{{ fileUploadVO.fileName }}</el-link>
            <el-button v-if="fileUploadVO.fileAddress"
              style="margin-left: 15px;"
              type="primary"
              size="mini"
              :underline="false"
              @click="lookLink(fileUploadVO)">
              预览
            </el-button>
          </div>
        </div>
      </el-upload>
      <el-link v-else
        type="primary"
        @click="downFun(fileUploadVO.fileName,fileUploadVO.fileAddress)">{{ fileUploadVO.fileName }}</el-link>
    </el-row>
    <el-radio-group v-model="activeName"
      class="m-b"
      @change="changeActive">
      <el-radio-button label="user">人员信息</el-radio-button>
      <el-radio-button label="expenditure">经费信息</el-radio-button>
      <el-radio-button label="indexPage">指标信息</el-radio-button>
      <el-radio-button label="achievement">成果信息</el-radio-button>
      <el-radio-button label="schedule">进度信息</el-radio-button>
    </el-radio-group>
    <div v-if="isShow">
      <el-row v-if="activeName=='user'">
        <UserComp :isShowBtn="isShowBtn"
          :projectId="projectId"
          :projectStage="projectStage"
          :memberList="memberList"
          @initData="initData" />
      </el-row>
      <el-row v-if="activeName=='expenditure'">
        <Expenditure :isShowBtn="isShowBtn"
          :projectId="projectId"
          :projectStage="projectStage"
          :fundEight="fundEight"
          :fundEighteen="fundEighteen"
          @initData="initData" />
      </el-row>
      <el-row v-if="activeName=='indexPage'">
        <el-row>
          <div class="flex-between">
            <h1 class="before m-b">指标信息</h1>
            <el-button type="primary"
              class="saveBtn"
              size="small"
              v-if="isShowBtn"
              @click="submitFun">保存当前信息</el-button>
          </div>
          <el-input v-model="projectInfo.indicatorInformation"
            type="textarea"
            rows="20"
            placeholder="请输入指标信息"
            :disabled="!isShowBtn" />
        </el-row>
      </el-row>
      <el-row v-if="activeName=='achievement'">
        <el-row>
          <div class="flex-between">
            <h1 class="before m-b">成果信息</h1>
            <el-button type="primary"
              class="saveBtn"
              size="small"
              v-if="isShowBtn"
              @click="submitFun">保存当前信息</el-button>
          </div>
          <el-input v-model="projectInfo.archievementInformation"
            type="textarea"
            rows="20"
            placeholder="请输入成果信息"
            :disabled="!isShowBtn" />
        </el-row>
      </el-row>
      <el-row v-if="activeName=='schedule'">
        <el-row>
          <div class="flex-between">
            <h1 class="before m-b">进度信息</h1>
            <el-button type="primary"
              class="saveBtn"
              size="small"
              v-if="isShowBtn"
              @click="submitFun">保存当前信息</el-button>
          </div>
          <el-input v-model="projectInfo.scheduleInformation"
            type="textarea"
            rows="20"
            placeholder="请输入进度信息"
            :disabled="!isShowBtn" />
        </el-row>
      </el-row>

      <PreviewPdf v-if="showPdf"
        :pdfUrl="pdfUrl"
        @closeLookPdf="closeLookPdf" />
    </div>
    <div v-else
      v-loading="true"
      style="height:500px"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.1)"></div>
  </div>
</template>

<script>
import { uploadFile, getWord2Pdf } from '@/api/common.js'
import {
  extractInfo,
  getIndicatorInputInfo,
  saveOrUpdateInfo
} from '@/api/indicatorInput.js'
import UserComp from './user.vue'
import Expenditure from './expenditure.vue'
import PreviewPdf from '@/views/common/previewPdf.vue'
export default {
  props: {
    isShowBtn: {
      type: Boolean,
      default: true
    },
    reviewStage: {
      type: String,
      default: ''
    },
    projectId: {
      type: String,
      default: ''
    }
  },
  components: {
    UserComp,
    Expenditure,
    PreviewPdf
  },
  data() {
    return {
      showPdf: false,
      pdfUrl: null,
      n: null,
      isShow: false,
      activeName: 'user',
      indexInfo: '',
      projectStage: '',
      memberList: [],
      fundEight: {},
      fundEighteen: {},
      projectInfo: {
        indicatorInformation: '',
        archievementInformation: '',
        scheduleInformation: ''
      },
      fileUploadVO: {
        fileName: '',
        filePath: '',
        fileAddress: ''
      }
    }
  },
  created() {},
  methods: {
    changeActive() {
      this.$emit('changeActive', this.activeName)
    },
    changeFun(val) {
      this.activeName = val
    },
    submitFun() {
      saveOrUpdateInfo({
        ...this.projectInfo,
        projectId: this.projectId,
        projectStage: this.projectStage
      }).then(() => {
        this.initData(this.reviewStage)
      })
    },
    initData(projectStage) {
      this.projectStage = projectStage
      this.isShow = false
      getIndicatorInputInfo({
        projectId: this.projectId,
        projectStage: projectStage
      }).then(res => {
        const {
          memberList,
          fundEight,
          fundEighteen,
          projectInfo,
          fileUploadVO
        } = res.data || {}
        this.fundEight = fundEight
        this.fundEighteen = fundEighteen
        this.projectInfo = { ...projectInfo }
        this.memberList = memberList
        this.fileUploadVO = { ...fileUploadVO }
        setTimeout(() => {
          this.isShow = true
        }, 500)

        console.log(res)
      })
    },
    downFun(name, url) {
      this.downloadByUrl(name, url)
    },
    lookLink(item) {
      let txt = this.getMatchType(item.fileAddress)
      if (txt === 'word') {
        getWord2Pdf({ wordPath: item.fileAddress }).then(res => {
          if (res.data) {
            this.lookPdf(res.data)
          } else {
            this.$message.warning('暂无法预览，请下载后查看！')
          }
        })
      } else {
        if (txt === 'pdf') {
          this.lookPdf(item.fileAddress)
        } else {
          this.$message.warning('文件不支持预览！')
        }
      }
    },
    lookPdf(url) {
      this.pdfUrl = url
      this.showPdf = true
    },
    closeLookPdf() {
      this.showPdf = false
      this.pdfUrl = null
    },
    handleExceed(file) {
      this.$refs.uploadRef.clearFiles()
      this.handleChange(file[0])
    },
    handleChange(file) {
      const _file = file?.raw ?? file
      const formData = new FormData()
      formData.append('file', _file)
      uploadFile(formData).then(res => {
        const fileId = res.data.fileId || 0
        extractInfo({
          fileId,
          projectId: this.projectId,
          projectStage: this.reviewStage
        }).then(() => {
          // const { memberList, fundEight, fundEighteen, projectInfo,fileUploadVO } = res.data || {};
          // this.fundEight = fundEight;
          // this.fundEighteen = fundEighteen;
          // this.projectInfo = { ...projectInfo };
          // this.memberList = memberList;
          // this.fileUploadVO = {...fileUploadVO}
          this.initData(this.reviewStage)
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.upload-demo {
  display: inline-block;
}
:deep(.el-textarea.is-disabled .el-textarea__inner) {
  background: #fff !important;
  font-size: 18px !important;
  color: #333 !important;
}
:deep(.el-textarea .el-textarea__inner) {
  font-size: 18px !important;
}
</style>
